<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<title>Crafty - Crafty.DOM</title>
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
	<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">List of Events</a></li><li class="category">Core<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind</a></li><li><a href="Crafty-c.html">Crafty.c</a></li><li><a href="Crafty-clone.html">Crafty.clone</a></li><li><a href="Crafty-e.html">Crafty.e</a></li><li><a href="Crafty-extend.html">Crafty.extend</a></li><li><a href="Crafty-frame.html">Crafty.frame</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion</a></li><li><a href="Crafty-init.html">Crafty.init</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused</a></li><li><a href="Crafty-one.html">Crafty.one</a></li><li><a href="Crafty-pause.html">Crafty.pause</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger</a></li><li><a href="Crafty-unbind.html">Crafty.unbind</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Gravity.html">Gravity</a></li></ul></li><li class="category">Animation<ul class="category-list"><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">Assets<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-image_whitelist.html">Crafty.image_whitelist</a></li><li><a href="Crafty-loader.html">Crafty.loader</a></li><li><a href="Crafty-paths.html">Crafty.paths</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets</a></li></ul></li><li class="category">Audio<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">Debug<ul class="category-list"><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">Events<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent</a></li><li><a href="Crafty-bind.html">Crafty.bind</a></li><li><a href="Crafty-one.html">Crafty.one</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent</a></li><li><a href="Crafty-trigger.html">Crafty.trigger</a></li><li><a href="Crafty-unbind.html">Crafty.unbind</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind</a></li></ul></li><li class="category">Game Loop<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">Graphics<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor</a></li><li><a href="Crafty-background.html">Crafty.background</a></li><li><a href="Crafty-canvas.html">Crafty.canvas</a></li><li><a href="Crafty-DOM.html">Crafty.DOM</a></li><li><a href="Crafty-DrawManager.html">Crafty.DrawManager</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart</a></li><li><a href="Crafty-sprite.html">Crafty.sprite</a></li><li><a href="DOM.html">DOM</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li></ul></li><li class="category">Input<ul class="category-list"><li><a href="Crafty-eventObject.html">Crafty.eventObject</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="KeyboardEvent.html">KeyboardEvent</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">Misc<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">Model<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">Scenes<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene</a></li></ul></li><li class="category">Stage<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background</a></li><li><a href="Crafty-scene.html">Crafty.scene</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">Utilities<ul class="category-list"><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>Crafty.DOM</h1><div id="Crafty-DOM"><span class="markdown"><p>Collection of utilities for using the DOM.</p>
</span></div><div><h4>Methods and Properties</h4><ul class="page-toc"><li><a href="#Crafty-DOM-getStyle">.getStyle</a></li><li><a href="#Crafty-DOM-inner">.inner</a></li><li><a href="#Crafty-DOM-translate">.translate</a></li><li><a href="#Crafty-DOM-window">.window</a></li></ul><div id="Crafty-DOM-getStyle"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.DOM.getStyle</h2><div class="crafty-method"><code class="signature">public Object Crafty.DOM.getStyle(HTMLElement obj, String property)</code><dl class="parameter"><dt> obj </dt><dd><span class="markdown"><p>HTML element to find the style</p>
</span></dd></dl><dl class="parameter"><dt> property </dt><dd><span class="markdown"><p>Style to return</p>
</span></dd></dl></div><span class="markdown"><p>Determine the value of a style on an HTML element. Notation can be
in either CSS or JS.</p>
</span></div><div id="Crafty-DOM-inner"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.DOM.inner</h2><div class="crafty-method"><code class="signature">public Object Crafty.DOM.inner(HTMLElement obj)</code><dl class="parameter"><dt> obj </dt><dd><span class="markdown"><p>HTML element to calculate the position</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>Object with <code>x</code> key being the <code>x</code> position, <code>y</code> being the <code>y</code> position</p>
</span></dd></dl></div><span class="markdown"><p>Find a DOM elements position including
padding and border.</p>
</span></div><div id="Crafty-DOM-translate"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.DOM.translate</h2><div class="crafty-method"><code class="signature">public Object Crafty.DOM.translate(Number clientX, Number clientY)</code><dl class="parameter"><dt> clientX </dt><dd><span class="markdown"><p>clientX position in the browser screen</p>
</span></dd></dl><dl class="parameter"><dt> clientY </dt><dd><span class="markdown"><p>clientY position in the browser screen</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>Object <code>{x: ..., y: ...}</code> with Crafty coordinates.</p>
</span></dd></dl></div><span class="markdown"><p>The parameters clientX and clientY are pixel coordinates within the visible
browser window. This function translates those to Crafty coordinates (i.e.,
the coordinates that you might apply to an entity), by taking into account
where the stage is within the screen, what the current viewport is, etc.</p>
</span></div><div id="Crafty-DOM-window"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.DOM.window</h2><span class="markdown"><p>Object with <code>width</code> and <code>height</code> values representing the width
and height of the <code>window</code>.</p>
</span></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
